<template>
	<view class="box">
		<view class="" :style="{'height':statusBarHeight+ 47 + 'px'}"></view>
		<image class="beijingimg" src="https://wine-hjd.oss-cn-beijing.aliyuncs.com/1787458820172394496_a.png" mode=""></image>
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1500"
			indicator-color='rgba(0, 0, 0, .3)' indicator-active-color='#ffffff'>
			<swiper-item v-for="(item,index) in listimg" :key="index">
				<view class="swiper-item uni-bg-red">
					<image :src="item.images" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
	
		<view class="gonggao">
				<image src="../../static/simg/s5.png" mode=""></image>
				<view class="t_r">
					<uni-notice-bar
					:speed='15'
					background-color='#E9C995' 
					:show-icon='false' 
					scrollable
					color='#000000'
					:text="listgonggao[0].content" />
				</view>
		</view>
		<view class="imgs">
			<image src="../../static/ab.png" mode=""></image>
		</view>

		<view class="chanpin_hezi" v-for="(item,index) in listshangpin" :key="index">
			<view class="chanpin_beijing dingwei">
				<image src="../../static/simg/s7.png" mode=""></image>
			</view>
			<view class="left">
				<span>{{item.productName}}</span>
				<p><a>￥</a>{{item.productPriceShow}}</p>
				<button @click="queren(index)">立即购买</button>
			</view>
			<view class="right">
				<image :src="item.productImage" mode=""></image>
			</view>
		</view>
		<view class="" style="height: 60rpx;">
			
		</view>
     <uv-tabbar :value="0"  class="tab"></uv-tabbar>
	</view>
</template>

<script>
	import {
		getnotice,
		getproduct
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				statusBarHeight:uni.getStorageSync('heights'),
				listimg: [],
				listgonggao: [],
				listshangpin: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
			}
		},
		onLoad() {
			this.getlist()
		
		},
		onShareAppMessage(res) {
			return {
				title: '汉正和集岛欢迎你！',
				imageUrl:'/static/fx.png',
				path: `/pages/tab/home`,
			}
		},
		onShareTimeline(res) {
			return {
				title: '汉正和集岛欢迎你！',
				imageUrl: '/static/fx.png',
				path: `/pages/tab/home`,
			}
		},
		methods: {
			getlist() {
				let data = {
					advertType: 1
				}
				getnotice(data).then(res => {
					this.listimg = res.rows
				})
				let datas = {
					advertType: 2
				}
				getnotice(datas).then(res => {
					this.listgonggao = res.rows
				})
				getproduct(this.queryParams).then(res => {
					this.listshangpin = res.rows
				})
			},
			jump(index) {
				this.value = index
				if (index == 1) {
					uni.reLaunch({
						url: './store'
					})
				} else if (index == 2) {
					uni.reLaunch({
						url: './my'
					})
				}
			},
			queren(index) {
				let dataStr = encodeURIComponent(JSON.stringify(this.listshangpin[index]));
				let url = '/pages/dingdan/confirm?data=' + dataStr;
				uni.navigateTo({
					url: url
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.imgs{
		width: 300rpx;
		height: 56rpx;
		margin: 40rpx auto;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.beijingimg{
		  position: fixed;//使用粘滞定位 实际可以根据情况调整，不要拘泥于一种定位
		  left: 0;
		  bottom: 0;
		  display: block;
		  width: 100%;
		  height: 100%;
		  z-index: -999;
	}
	.box ::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
	.box{
		.swiper {
			width: 680rpx;
			height: 322rpx;
			border: 1px solid #E4C085;
			border-radius: 30rpx;
			image {
				width: 680rpx;
				height: 320rpx;
				border-radius: 30rpx;
			}
			
		}
	}

	.dingwei {
		position: absolute;
	}
	.chanpin_hezi {
		z-index: 2;
		width: 680rpx;
		height: 320rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		.left {
			position: relative; //添加的定位
			z-index: 100;
			display: flex;
			flex-direction: column;
			margin: 50rpx 0rpx 0rpx 30rpx;

			span {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #1C0C00;
			}

			p {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #BC7E13;
				margin: 20rpx 0rpx;
				margin-bottom: 35rpx;

				a {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #BC7E13;
				}
			}

			button {
				width: 223rpx;
				height: 69rpx;
				background: linear-gradient(42deg, #5A4629 0%, #21150A 53%, #302315 100%);
				border-radius: 33rpx;
				border: 2px solid;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #E4C085;
				margin: 0;
				padding: 0;
			}
		}

		.right {
			position: relative; //添加的定位
			z-index: 100;
			width: 280rpx;
			height: 320rpx;
			image {
				width: 280rpx;
				height: 320rpx;
				border-radius: 30rpx;
			}
		}

		.chanpin_beijing {
			image {
				width: 680rpx;
				height: 320rpx;
			}
		}
	}
	.gonggao {
		width: 680rpx;
		margin-top: 50rpx;
		background-color: #E9C995;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
			image {
				width: 55rpx;
				height: 55rpx;
				margin: 0 10rpx 0rpx 20rpx;
			}
			.t_r{
				width: 580rpx;
				height: 86rpx;
				line-height: 86rpx;
			}
	}


</style>